<template>
  <view class="page">
    <!-- 头部工具 -->
    <view class="header">
      <view>wifi</view>
      <view>10.00</view>
      <view>周一 11-18</view>
      <view>设置</view>
      <view>退出</view>
      <template v-if="isSearch">
        <view class="search">
          <view class="search-input">搜索框</view>
        </view>
      </template>
    </view>
    <!-- 温度曲线 -->
    <view class="temp">
      <!-- 曲线区 -->
      <view class="temp_curve">
        <view class="temp_curve_title">
          <image
            class="title_iocn"
            src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
          />
          <view class="device_name"> 温度曲线 </view>
        </view>
        <!-- 温度曲线文字 -->
        <view class="curve_text_img">
          <view class="curve_text">
            <text class="wait">等待</text>
            <text class="freezing">冷冻</text>
            <text class="cold_storage">冷藏</text>
            <text class="proof_one">醒发1</text>
            <text class="proof_two">醒发2</text>
          </view>
          <!-- 温度曲线图片 -->
          <image
            class="curve_img"
            :src="stateImgUrl"
          />
        </view>
      </view>
      <view class="voltage_content">
        <!-- 电压区 -->
        <view class="minimum_voltage">
          <image
            class="voltage_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/rectangle_icon.png"
          />
          <view class="voltage_text">
            <text class="voltage_title">当前电压:221</text>
          </view>
        </view>
        <!-- 最低电压 -->
        <view class="current_voltage">
          <image
            class="voltage_img"
            src="https://mkservice.mk-iot.com/subFile/mk2240/voltage_icon.png"
          />
          <view class="voltage_text">
            <text class="voltage_title">最低电压：220</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 温度预设 -->
    <view class="Temperature_preset">
      <!-- 温度预设 -->
      <view
        class="small_control_img"
        @tap="
          isRendering
            ? ''
            : clickFreezingBtn(indexAllData.currMode, indexAllData.currState)
        "
        :style="
          indexAllData.currState == 1
            ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_on.png)'
            : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_off.png)'
        "
      >
        <view class="freezing_text">
          <text :style="indexAllData.currState == 1 ? 'color: #fff;' : ''"
            >冷冻</text
          >
        </view>
      </view>
      <!-- 湿度预设 -->
      <view
        class="small_control_img"
        @tap="
          isRendering
            ? ''
            : clickFreezingBtn(indexAllData.currMode, indexAllData.currState)
        "
        :style="
          indexAllData.currState == 1
            ? 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_on.png)'
            : 'background-image: url(https://mkservice.mk-iot.com/subFile/mk2240/btn_freezing_off.png)'
        "
      >
        <view class="freezing_text">
          <text :style="indexAllData.currState == 1 ? 'color: #fff;' : ''"
            >冷冻</text
          >
        </view>
      </view>
    </view>

    <!-- 完成时间 -->
    <view class="Completion_time">
      <view class="Completion_view">
        <image
          src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
          class="Completion_image"
        />
        <view class="Completion_text">完成时间</view>
      </view>

      <view class="Completion_textnow">现在时间</view>
    </view>
    <!-- 预约区 -->
    <view class="Appointment">
      <image
        src="https://mkservice.mk-iot.com/subFile/mk2240/title_iocn.png"
        class="Appointment_image"
      />
      <view class="Appointment_text">预约</view>
    </view>
    <!-- 按钮区 -->
    <view class="week_all">
      <weekbutton></weekbutton>
    </view>
    <view class="functional_services">功能区</view>
  </view>
</template>

<script>
  import weekbutton from '../components/weekbutton.vue'
  export default {
    components: {
      weekbutton,
    },
    data() {
      return {
        stateImgUrl:
          'https://mkservice.mk-iot.com/subFile/mk2240/curve_one.svg',
        isSearch: false,
      }
    },
  }
</script>
<style lang="scss">
  .page {
    // 总的背景和间距
    background-color: rgb(42, 44, 56);
    padding-left: 23rpx;
    margin-bottom: 10rpx;
    // 工具栏
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 23rpx;
      padding-right: 23rpx;
      // 背景
      background-color: rgb(65, 89, 118);
      box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
        3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
      border-radius: 24rpx;
      height: 90rpx;
      width: 710rpx;
    }
    // 温度曲线
    .temp {
      margin-top: 10rpx;
      // 外面包裹的
      box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
        3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
      border-radius: 24rpx;
      border-top: 4rpx solid rgb(65, 89, 118);
      border-left: 4rpx solid rgb(65, 89, 118);
      border-right: 4rpx solid rgb(65, 89, 118);
      .border-strong {
        border: 2rpx solid rgb(65, 89, 118);
        box-shadow: 0px 5rpx 3rpx 0px rgba(244, 237, 235, 0.3),
          3rpx 4rpx 3rpx 0px rgba(212, 219, 236, 0.3);
        border-radius: 24rpx;
      }
      .temp_curve {
        width: 680rpx;
        height: 260rpx;
        background: #ffffff;
        // background-color: rgb(65, 89, 118);
        box-shadow: 0px 5rpx 3rpx 0px rgba(244, 237, 235, 0.3),
          3rpx 4rpx 3rpx 0px rgba(212, 219, 236, 0.3);
        border-radius: 24rpx;

        margin-top: 20rpx;
        // margin-left: 20rpx;

        .temp_curve_title {
          padding-top: 20rpx;
          padding-left: 32rpx;
          display: flex;
          align-items: center;
        }
        .title_iocn {
          width: 24rpx;
          height: 24rpx;
          display: block;
        }

        .device_name {
          margin-left: 10rpx;
          font-size: 28rpx;
          font-weight: bold;
          width: 260rpx;
          word-wrap: break-word;
        }
        .curve_text_img {
          text-align: center;
        }

        .curve_text {
          display: flex;
          justify-content: space-between;
          font-size: 26rpx;
          margin: 20rpx 10rpx 0px 30rpx;
        }
        .curve_img {
          width: 654rpx;
          height: 100rpx;
        }
      }
    }
    // 温度预设
    .Temperature_preset {
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
      margin-bottom: 10rpx;

      .small_control_img {
        width: 160rpx;
        height: 160rpx;
        background-size: cover;
      }
    }
    // 完成时间
    .Completion_time {
      // 布局间距
      display: flex;
      align-items: center;
      justify-content: space-between;
      // margin-left: 20rpx;
      margin-top: 20rpx;
      padding-left: 47rpx;
      padding-right: 96rpx;
      // 高度背景形状
      height: 130rpx;
      width: 710rpx;
      // background: black;
      background-color: rgb(65, 89, 118);
      box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
        3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
      border-radius: 24rpx;
      .Completion_view {
        display: flex;
        align-items: center;
        // justify-content: space-between;
        // 图片区
        .Completion_image {
          width: 58rpx; // 图片宽度，可以根据需要调整
          height: 78rpx; // 图片高度，可以根据需要调整
        }
        .Completion_text {
          font-size: 56rpx;
        }
      }
      .Completion_textnow {
        font-size: 56rpx;
      }
    }
    // 预约区
    .Appointment {
      display: flex;
      align-items: center; // 垂直居中对齐
      justify-content: space-between; // 水平分布，中间留有间隔
      // padding: 5rpx; // 内边距，可以根据需要调整
      padding-left: 88rpx;
      padding-right: 136rpx;
      margin-top: 20rpx;
      gap: 5rpx; // 子元素之间的间隔，可以根据需要调整
      // 背景
      background-color: rgb(65, 89, 118);
      box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
        3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
      border-radius: 24rpx;
      // 高度背景形状
      height: 130rpx;
      width: 710rpx;
      .Appointment_image {
        width: 78rpx; // 图片宽度，可以根据需要调整
        height: 78rpx; // 图片高度，可以根据需要调整
      }
      .Appointment_text {
        font-size: 56rpx;
      }
    }
    // 当前电压区
    .voltage_content {
      width: 710rpx;
      height: 120rpx;
      // background: #ffffff;
      background-color: rgb(65, 89, 118);
      box-shadow: 0rpx 5rpx 3rpx 0rpx rgba(244, 237, 235, 0.3),
        3rpx 4rpx 3rpx 0rpx rgba(212, 219, 236, 0.3);
      // 实现椭圆布局
      border-radius: 54rpx;
      align-items: center;
      margin-top: 20rpx;
      // margin-left: 10rpx;
      display: flex;
      justify-content: space-between;
      // 最少的
      .minimum_voltage {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 36rpx;
      }

      .voltage_img {
        width: 33rpx;
        height: 33rpx;
      }

      .voltage_text {
        margin-left: 18rpx;
      }

      .voltage_title {
        display: block;
        font-size: 24rpx;
        color: gray;
      }
      // 当前的
      .current_voltage {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 36rpx;
      }
    }
  }
</style>
